<template>
  <div>
    <div>
      <h4 style="margin:0 0 10px 0">商品列表</h4>
      <el-row style="margin-bottom:10px">
        <el-col :span="16" >
          <div style="display:flex;align-items:center">
            <span>选择城市:</span>
              <el-select v-model="ruleForm2.province"  @change="changeCity" filterable placeholder="选择省份" style="width:110px">
                <el-option v-for="item in ruleForm2.options1" :key="item.id" :label="item.areaname" :value="item.id" > </el-option>
              </el-select>
              <el-select v-model="ruleForm2.city" v-show="ruleForm2.options2" filterable placeholder="选择城市" style="width:110px">
                <el-option v-for="item in ruleForm2.options2" :key="item.id" :label="item.areaname" :value="item.id"> </el-option>
              </el-select>
            <span>类别:</span>
            <el-select v-model="value" style="width:80px" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <span>订单状态:</span>
            <el-select v-model="statusValue" style="width:100px" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8" style="text-align:right">
          <el-input v-model="sheachValue" style="width:250px" placeholder="输入搜索内容"></el-input>
          <el-button type="primary" @click="seachFun">搜索</el-button>
        </el-col>
      </el-row>
      
      <el-table :data="tableData" border style="width: 100%" >
        <el-table-column prop="name" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        
        <el-table-column prop="hospitalInfo.name" label="id"> </el-table-column>      
        <el-table-column prop="hospitalInfo.city" label="城市"> </el-table-column>      
        <el-table-column prop="type" label="类别"> </el-table-column>      
        <el-table-column prop="title" label="标题"> </el-table-column>      
        <el-table-column prop="price" label="价格"> </el-table-column>      
        <el-table-column prop="payCount" label="购买人数"> </el-table-column>      
        <el-table-column prop="pageView" label="浏览人数"> </el-table-column>      
        <el-table-column prop="page_view" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status==0" >下线</div>
            <div v-else-if="scope.row.status==1" style="color:#67c23a" >上线</div>
            <div v-else>删除</div>
          </template>  
        </el-table-column>       
        <el-table-column prop="page_view" label="操作" width="180"> 
          <template slot-scope="scope" >
            <div>
              <el-button class="addBtn" type="primary" @click="sheachInfo(scope.row)">查看</el-button>
              <el-button class="addBtn" v-if="scope.row.status==0" type="success" @click="upStatusFun(scope.row.id,1)">上线</el-button>
              <el-button class="addBtn" v-else-if="scope.row.status==1"  type="warning" @click="upStatusFun(scope.row.id,0)">下线</el-button>
              <el-button class="addBtn" v-if="scope.row.status != 2" type="danger" @click="upStatusFun(scope.row.id,2)">删除</el-button>
              <el-button class="addBtn" v-else  @click="upStatusFun(scope.row.id,0)">恢复</el-button>
            </div>  
          </template>  
        </el-table-column>       
      </el-table>
     
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog :visible.sync="infoStatus">
        <div style="width:640px">
          <h5 style="font-size:16px;margin:0;">{{infoObj.title}}</h5>
          <div>类别：{{infoObj.type}}</div>
          <div>
            <span>标签：</span>
            <span v-for="(item,index) in infoObj.productMarks" :key="index"> {{item.name}}</span>
          </div>
          <div>
            <span>价格：{{infoObj.price}}</span>
            <span style="margin-left:40px">原价：{{infoObj.originalPrice}}</span>
          </div>
          <div>
            <span>封面：</span>
            <img :src="infoObj.cover" alt="" style="display:inline-block;width:80px;height:90px;vertical-align: middle;">
          </div>
          <div style="background:#e5e5e5;margin-top:20px">商品内容：</div>
          <div class="infoBox"  v-html="infoObj.introduction"></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'

  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入关键字'));
        } else {
          callback();
        }
      };
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        currentPage4: 1,//分野  
        total:0,      
        tableData: [],
        page:1,
        pageSize:10,
        sheachValue:'',
        statusValue:'',
        infoStatus:false,//查看商品的显示状态
        infoObj:{
          title:'',
          type:'',
          price:'',
          originalPrice:'',
          cover:'',
          productMarks:''
        },
        cityValue:'',
        value5: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        },{
          value: '选项5',
          label: '北京烤鸭'
        }],
        statusList:[{
          value:0,
          label:'下线'
        },{
          value:1,
          label:'上线'
        },{
          value:2,
          label:'删除'
        }],
        value: '',
        ruleForm2:{
          province:'',
          city:'',
          options1:'',
          options2:''
        }
      }
    },
    created() {
      this.getlist();
      Http.getAreaList(0)
      .then( res => {
        this.ruleForm2.options1 = res.data.data;
      })
    },
    methods: {
       getlist() {
        const parm ={
          "pageIndex":this.page,
          "pageSize":this.pageSize,
          "keyword":this.sheachValue,
          "status":this.statusValue,
          "keyword":this.sheachValue,
          "city_id":this.cityValue
        };
        if(this.value != 0) {
          parm.type = this.value; 
        }
        // commoLIst
        Http.getCommoList(parm)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
          
        })
        .catch( error => {
          
        });
         Http.commoTypes({})
        .then( res => {
          this.options = res.data.data;
          this.options.unshift({'id':0,'name':'全部'})
        })
        .catch( error => {
          
        })
      },  
      sheachInfo(row){
        this.infoStatus = true;
        this.infoObj.title = row.title;
        this.infoObj.productMarks = row.productMarks;
        this.infoObj.type = row.type;
        this.infoObj.price = row.price;
        this.infoObj.cover = row.cover;
        this.infoObj.originalPrice = row.originalPrice;
        this.infoObj.introduction = row.introduction;
        
      },
      changeCity(val,city=''){
        Http.getAreaList(val)
          .then( res => {
            this.ruleForm2.options2 = res.data.data;
            this.ruleForm2.options3 = '';
            this.ruleForm2.area = '';
            this.ruleForm2.city = city;
          })
      },

       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        
      },
     
      upStatusFun(id,status) {
        
        let txt;
        const param = {
          id,
          status
        }
        if (status == 1) {
          txt = '上线'
        } else if (status == 2) {
          txt = '删除'
        } else {
          txt = '下线'
        };
        Http.commUpdata(param)
        .then( res => {
          if( res.data.code == 200 ){
            this.$message.success(`${txt}成功`)
            this.getlist()         
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
            this.$router.push('/')
          } else {
            this.$message.error(`请求失败原因：${res.data.message}`)
          }
        })
        .catch( error => {
          this.$message.error('服务器请求失败')
        })
      },

      seachFun(){
        if(this.ruleForm2.city){
          this.cityValue = this.ruleForm2.city;
        } else if (this.ruleForm2.province && !this.ruleForm2.city){
          this.cityValue = this.ruleForm2.city;
        };
        
         
        this.getlist()
      }
    }
  }
</script>
<style>
.infoBox img{
  display: inline-table;
  width: 100%!important;
}
</style>
